<template>
  <div class="page">
    <div class="discuss">
      <div class="nav-bar">
        <div class="nav-list cannot-select-d">
          <div class="nav-item" 
                :class="{'nav-active': navIndex === index}" 
                v-for="item,index in nav" 
                :key="index"
                @click="switchNavBar(index)"
          >
            {{ item }} 48
          </div>
        </div>
        <div class="search">
          <img class="search-icon cannot-select-d" src="https://image.xuexiwangzhe.com/FvG6a_y69IvEKaiaYt-Y6mMgQbw8">
          <input class="search-text" type="text" placeholder="搜索内容">
        </div>
      </div>
      <div class="content">
        <div class="rich-text">
          <div class="edit-content" :class="{'edit-able-placeholder': !richText}">
            <div class="edit-able"
                  contenteditable="true" 
                  @drop="preventDrop"
                  @input="editText">
            </div>
          </div>
          <div class="resource">
            <img-list v-if="false"></img-list>
            <audio-frequency v-if="false"></audio-frequency>
            <file v-if="true"></file>
            <img v-if="true"
                  class="fork cannot-select-d" 
                  src="https://image.xuexiwangzhe.com/FmnCT49kmyg-l_qVz6SQT7zRCExa"
                  @click="del"
            >
          </div>
          <div class="operation cannot-select-d">
            <div class="o-upload">
              <img class="o-upload-icon" @click="upload" src="https://image.xuexiwangzhe.com/FqlUxKkS3mvwTSq2euzD-jqHB1FB">
              <img class="o-upload-icon" @click="upload" src="https://image.xuexiwangzhe.com/FvqGbrMB8SU0UfugyMJr-xGhdPAf">
              <img class="o-upload-icon" @click="upload" src="https://image.xuexiwangzhe.com/FuZ02bsXcgJ8jde6k_B8AO8Xg53e">
              <img class="o-upload-icon" @click="upload" src="https://image.xuexiwangzhe.com/FlLriHXGKHVz0R-AIYMZPQCoy6hC">
            </div>
            <div class="o-root">
              <mu-radio :value="1" 
                        :class="{'o-root-radio-active': labelPosition === 1, 'o-root-radio-ok': richText.length > 2}" 
                        v-model="labelPosition" 
                        label="公开（其他成员可见）">
              </mu-radio>
              <mu-radio :value="2" 
                        style="margin-left: 33px;"
                        :class="{'o-root-radio-active': labelPosition === 2, 'o-root-radio-ok': richText.length > 2}" 
                        v-model="labelPosition" 
                        label="私密（仅我可见）">
              </mu-radio>
              <mu-button class="submit" 
                          color="#265CFF" 
                          round 
                          :disabled="richText.length < 3">
                提交
              </mu-button>
            </div>
          </div>
        </div>
        <div class="comment-content">
          <router-view @previewImg="previewImg"></router-view>
        </div>
      </div>
    </div>


    <preview v-if="isPreview" @previewImg="previewImg"></preview>
    <excellent></excellent>
    <upload-dialog ref="upload"></upload-dialog>
    <delete-dialog ref="delete"></delete-dialog>
  </div>
</template>

<script>
import AudioFrequency from "./components/audio-frequency"
import File from './components/file.vue';
import ImgList from './components/imgList.vue';
import Preview from './components/preview.vue';
import Excellent from './components/excellent.vue';
import UploadDialog from './components/uploadDialog';
import DeleteDialog from './components/deleteDialog';

export default {
  components: {
    AudioFrequency,
    ImgList,
    File,
    UploadDialog,
    DeleteDialog,
    Preview,
    Excellent
  },
  data() {
    return {
      nav: ["全部", "精选", "小组", "我的"],
      navIndex: 0, // nav 选中索引
      labelPosition: 1, // 文本框 公开/私密
      richText: "", // 文本框内容
      isPreview: false,
      updateSimple: true, //上传确认弹框
    }
  },
  created() {



  },
  methods: {
    closePreview() {
      this.isPreview = false;
    },
    // 切换导航条
    switchNavBar(index) {
      if(this.navIndex !== index) {
        this.navIndex = index;
      }
    },
    // 编辑文本框 
    editText(e) {
      this.richText = e.target.innerText;
    },
    // 阻止拖拽图片到富文本
    preventDrop(e) {
      e.preventDefault();
    },
    // 弹出框-删除
    del() {
      this.$refs.delete.changeDeleteFile();
    },
    // 弹出框-上传
    upload() {
      this.$refs.upload.changeUploadFile();
    },
    // 预览图片
    previewImg(){
      this.isPreview = !this.isPreview;
    }
  }
}
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  background: #F2F4F8 !important;
}

.page {
  height: 100%;
  min-height: 100vh;
  width: 887px;
  margin: 0 auto;
}

.cannot-select-d {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.discuss {
  .nav-bar {
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-list {
    display: flex;
    justify-content: space-around;
    font-size: 15px;
    color: #666666;
  }

  .nav-item {
    height: 30px;
    margin-right: 54px;
    cursor: pointer;
  }

  .nav-active {
    font-weight: 600;
    color: #333333;
    position: relative;
    &::after {
      content: "";
      display: block;
      width: 27px;
      height: 3px;
      background: #666666;
      border-radius: 2px;
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .search  {
    position: relative;

    .search-icon {
      width: 12px;
      height: 12px;
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      vertical-align: bottom;
    }
    .search-text {
      width: 240px;
      height: 30px;
      background: #FFFFFF;
      border-radius: 15px;
      border: none;
      outline: none;
      padding-left: 36px;
      font-size: 11px;
    }
  }


  // ==================内容==================
  .content {
    width: 100%;
    background: #FFFFFF;
    border-radius: 11px;
    padding: 30px 28px;
  }

  .rich-text {
    min-height: 99px;
    border-radius: 6px;
    border: 2px solid #E6E6E6;
    position: relative;
    box-sizing: border-box;

    .edit-able {
      resize: none;
      outline: none;
      border: none;
      width: 100%;
      height: auto;
      min-height: 60px;
      font-size: 12px;
      padding: 11px 12px;
      position: relative;
      z-index: 1;
    }
    .edit-able-placeholder::before {
      content: "快来说说你的想法吧（至少3个字哦）";
      color: #999999;
      position: absolute;
      top: 9px;
      left: 13px;
    }

    .resource {
      padding: 3px 11px 12px 11px;
      display: flex;
      align-items: center;

      .fork {
        width: 14px;
        height: 14px;
        vertical-align: middle;
        margin-left: 18px;
        cursor: pointer;
      }
    }

    .operation {
      height: 38px;
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #E6E6E6;
    }
    .o-upload-icon {
      width: 18px;
      height: 18px;
      margin-right: 12px;
      cursor: pointer;
      vertical-align: middle;
    }

    .o-root {
      display: flex;
      align-items: center;
      line-height: 1;
      
      .mu-radio-label {
        color: #999999;
        font-size: 12px;
      }
      .mu-radio-icon {
        color: #999999;
        margin-right: 0;
        transform: scale(.6);
      }
    }
    .o-root-radio-active {
      .mu-radio-label,.mu-radio-icon {
        color: #666666;
      }
    }
    .o-root-radio-active.o-root-radio-ok {
      .mu-radio-icon {
        color: #265CFF;
      }
    }

    .submit {
      width: 105px;
      height: 26px;
      margin-left: 45px;
      box-shadow: none;
    }
    .submit.disabled {
      color: #ffffff;
      background: #E6E6E6;
    }

  }


}


</style>